<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-08-26 14:57:33
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2024-08-31 09:05:02
 * @FilePath: \orderApp\packageOne\pages\personalInfo\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<route lang="json5" type="page">
{
  layout: "default",
  style: {
    navigationStyle: "custom",
    navigationBarTextStyle: "black",
  },
}
</route>

<template>
  <view class="">
    <cu-navbar title="我的关注"></cu-navbar>

    <view class="wrap">
      <view v-if="attenList.length">
        <view>
          <!-- 菜肴信息 -->
          <cu-card padding="0 24rpx">
            <view v-for="(item, index) in attenList" :key="index">
              <view class="dishItemBox">
                <view class="sort">
                  {{ index + 1 }}
                </view>
                <uv-image
                  :src="item.dishLibrarie.dishUrl"
                  width="150rpx"
                  height="150rpx"
                  :lazy-load="true"
                  :fade-show="true"
                  :observeLazyLoad="true"
                  mode="aspectFit"
                  radius="15rpx"
                >
                  <template v-slot:error>
                    <view style="font-size: 24rpx">加载失败</view>
                  </template>
                </uv-image>

                <view class="content">
                  <view style="width: 70%">
                    <view class="title ellipsis">{{ item.dishLibrarie.dishName }}</view>
                    <view class="flex">
                      <view style="margin-right: 30.77rpx"
                        >关注 {{ item.dishLibrarie.allFollow || 0 }}</view
                      >
                      <view>被选 {{ item.dishLibrarie.allChoose || 0 }}</view>
                    </view>
                    <view class="flex">
                      <view>评价</view>
                      <view>
                        <uv-rate
                          :allowHalf="true"
                          :readonly="true"
                          active-color="#FAD20C"
                          inactive-color="#DCDEE0"
                          gutter="0"
                          size="16"
                          :value="item.dishLibrarie.dishStar / 2"
                        ></uv-rate>
                      </view>
                    </view>
                  </view>
                  <view>
                    <uv-icon
                      @click="onUnfollow(item,index)"
                      name="guanzhu"
                      custom-prefix="custom-icon"
                      size="38rpx"
                      color="#ff363f"
                    ></uv-icon>
                  </view>
                </view>
              </view>
            </view>
          </cu-card>
        </view>
        <uv-load-more
          line
          :status="loadMore.status"
          :loading-text="loadMore.loadingText"
          :loadmore-text="loadMore.loadmoreText"
          :nomore-text="loadMore.nomoreText"
          @loadmore="loadHandler"
        />
      </view>

      <view v-else>
        <cu-empty></cu-empty>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
//
import {
  getDeleteOneAttention,
} from "@/service/business/orderingDishes/index";
import { reqMyAttention } from "@/service/business/login/index";

import { useUserStore } from "@/store";

const { user } = useUserStore().userInfo;

// 取消关注
const onUnfollow = (item,index) => {
  uni.showLoading({
    title: '操作中',
    mask: true
  })
  return new Promise((resolve) => {
    getDeleteOneAttention({
      userId: user.userId,
      dishCode: item.dishLibrarie.dishCode,
    }).then((res) => {
      if (res.retCode === 2000) {
        attenList.value.splice(index,1)
        uni.hideLoading();
      }
    });
  });
};

// 加载状态数据
const loadMore = ref({
  status: "loading",
  loadingText: "努力加载中",
  loadmoreText: "上拉或点击加载更多",
  nomoreText: "到底啦",
});

// 分页信息
const pageInfo = ref({
  size: 10,
  current: 1,
  total: null,
});
// 手动加载更多
const loadHandler = () => {
  loadMoreFn();
};

// 触底加载更多
onReachBottom(() => {
  loadMoreFn();
});

const loadMoreFn = () => {
  if (pageInfo.value.current >= Math.ceil(pageInfo.value.total / pageInfo.value.size)) {
    loadMore.value.status = "nomore";
    return false;
  }
  pageInfo.value.current++;
  getMyAttention();
};

const attenList = ref([]);
const getMyAttention = () => {

  uni.showLoading({
    title: '加载中',
    mask: true
  })
  let params = {
    size: pageInfo.value.size,
    current: pageInfo.value.current,
    userId: user.userId,
  };
  reqMyAttention(params).then((res) => {
    if (res.retCode == 2000) {
      uni.hideLoading()
      attenList.value.push(...res.data);
      pageInfo.value.total = res.total;
      if (pageInfo.value.current < Math.ceil(res.total / pageInfo.value.size)) {
        loadMore.value.status = "loadmore";
      } else {
        loadMore.value.status = "nomore";
      }
    }
  });
};

onMounted(() => {
  getMyAttention();
});
</script>

<style lang="scss" scoped>
//

.wrap {
  padding: 24rpx;
}

.dishItemBox {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 30rpx 0;
  font-family: PingFang SC, PingFang SC;
  font-size: 23rpx;
  font-weight: 400;
  line-height: 38rpx;
  color: #969799;
  border-bottom: 1px solid #ebedf0;

  .sort {
    width: 60rpx;
    font-weight: 600;
    font-size: 31rpx;
    color: #595a5b;
  }

  .content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    padding-left: 15rpx;
    .title {
      font-size: 31rpx;
      font-weight: 600;
      line-height: 46rpx;
      color: #111111;
    }
  }
}
</style>
